<template>
  <div class="container">
    <div class="sbgl-nav breadcrumb">
      <img src="static/img/shu.png" alt="">
      <span>用户管理</span>
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span>权限管理</span>
    </div>
    <div class="row">
      <div class="col-md-12 ">
        <form id="searchForm" class="form-inline">
            <div class="form-group jsg-group">
              <label class="sr-only" for="exampleInputEmail3">权限名、权限ID、设备名</label>
              <input type="text" class="form-control jsg-group-input" id="exampleInputEmail3" placeholder="角色名、角色ID、权限名" name="group" v-model.trim="privilege">
            </div>          
          <button type="button" v-on:click="loadData" class="btn btn-default">搜索</button>
          <router-link :to="{ name: 'AddPermission', params: { method: 'add', privilegeId: 0 } }" class="btn btn-default">添加权限</router-link>
        </form>
        <div class="table-responsive sbzgl-tab-list">
          <table class="table table-bordered" id="tblData">
              <thead>
                <tr>
                  <th width="5%">序号</th>
                  <th width="15%">权限名</th>
                  <th width="15%">权限ID</th>
                  <th width="30%">设备名</th>
                  <th width="10%">操作</th> 
                </tr>
              </thead>
            <tbody> 
              <tr v-for="(item, index) in page.list">
                <td>{{page.limit*(page.pageNum-1)+index+1}}</td>
                <td>{{item.privilegename}}</td>
                <td>{{item.privilegeid}}</td>
                <td>
                  <select name="" id="" v-if="item.privilegeid.indexOf('GM0') !== 0">
                    <option value="" v-for="device in item.devicelist">{{device.devicename}}</option>
                  </select>
                </td>
                <td>
                  <router-link :to="{ name: 'AddPermission', params: { method:'edit', privilegeId: item.privilegeid } }" v-if="item.privilegeid.indexOf('GM0') !== 0"><span class="glyphicon glyphicon-edit"></span></router-link>&nbsp;
                  <a v-on:click="del(item.privilegeid, item.privilegename)" title="" v-if="item.privilegeid.indexOf('GM0') !== 0"><span class="glyphicon glyphicon-trash"></span></a>
                </td>
              </tr>
              
              </tbody>
            </table>
            <div class="pull-right">
              <my-page v-bind:pageNum="page.pageNum" v-bind:totalPageNum="page.totalPageNum" v-bind:totalNum="page.totalNum" v-bind:pageData="pageData" v-bind:allList="page.allList" v-bind:limit="page.limit"></my-page>
            </div>
          </div>
      </div>
    </div>    
  </div>
</template>

<script>
  import page from '@/components/Page.vue'
  import _ from 'lodash'

  export default {
    name: 'PermissionManage',
    components: { 'my-page': page },
    data: function () {
      return {
        group: '',
        privilege: '',
        page: {
          list: [],
          allList: [],
          pageNum: 1,
          totalPageNum: 0,
          totalNum: 0,
          limit: 10
        }
      }
    },
    created: function () {
      this.loadData()
    },
    methods: {
      loadData: function () {
        this.$http.post('/api/hedacmdreq', {method: 'GetPrivilege', flag: 0, privilege: this.privilege}).then(response => {
          this.page.allList = response.data.HedaACK.Body.privilegelist || []
          this.page.allList = _.sortBy(this.page.allList, 'privilegeid')  // 排序
          this.page.totalNum = this.page.allList.length || 0
          this.page.totalPageNum = Math.ceil(this.page.totalNum / this.page.limit)
        })
      },
      pageData: function (showList, pageNum) {
        this.page.pageNum = pageNum
        this.page.list = showList
      },
      del: function (id, name) {
        window.duang.confirm('确认要删除《' + name + '》的权限吗？', function () {
          this.$http.post('/api/hedacmdreq', {method: 'DeletePrivilege', privilegeid: id, privilegename: name}).then(response => {
            window.duang.msg(true, response.data.HedaACK.Body.retMsg)
            this.loadData()
          })
        })
      }
    }
  }
</script>
